<template>
  <div class="loading_box">
    <div class="mouth_box">
      <div class="mouth"></div>
      <div class="mouth"></div>
    </div>
    <div class="peas_box">
      <div class="peas"></div>
      <div class="peas"></div>
      <div class="peas"></div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@keyframes rotate_pacman_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes rotate_pacman_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
}

.loading_box {
  display: flex;
  align-items: center;
  justify-content: center;
  .mouth_box {
    position: relative;
    width: 80px;
    height: 80px;
    .mouth {
      position: absolute;
      left: 0;
      width: 0px;
      height: 0px;
      border-right: 40px solid transparent;
      border-top: 40px solid #279fcf;
      border-left: 40px solid #279fcf;
      border-bottom: 40px solid #279fcf;
      border-radius: 40px;
      &:nth-child(1) {
        animation: rotate_pacman_down 0.75s 0s infinite;
      }
      &:nth-child(2) {
        animation: rotate_pacman_up 0.75s 0s infinite;
      }
    }
  }
  .peas_box {
    position: relative;
    height: 80px;
    width: 60px;
    .peas {
      position: absolute;
      top: 50%;
      transform: translateY(-25%);
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #279fcf;
      &:nth-child(1) {
        left: 60px;
        animation: pacman-balls 1s 0.33s infinite linear;
      }
      &:nth-child(2) {
        left: 60px;
        animation: pacman-balls 1s 0.66s infinite linear;
      }
      &:nth-child(3) {
        left: 60px;
        animation: pacman-balls 1s 0.99s infinite linear;
      }
    }
  }
}
</style>
